<template>
  <div class="user">
    <div class="form">
      <el-form :model="userinfo" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="userinfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userinfo.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userinfo.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small">添加用户</el-button>
          <el-button size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="userdata" style="width: 100%">
        <el-table-column type="index" label="编号" width="180">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="password" label="密码" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column label="操作"> 
            <template>
                <el-button>删除</el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { userList } from '../api/api'
export default {
  data() {
    return {
      userinfo: {
        username: "",
        password: "",
        email: "",
      },
      userdata:[]
    };
  },
  created(){
      this.userListData()
  },
  methods:{
      async userListData(){
          let res = await userList()
          console.log(res);
          if(res.code === 0){
              this.userdata = res.data.array
          }
      }
  }
};
</script>

<style lang="less" scoped>
.form {
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>